import React, { Component } from 'react'
import { Text, View, Image, StyleSheet, ScrollView } from 'react-native'
import { Button, InputItem, List, Carousel } from '@ant-design/react-native'
import Swiper from 'react-native-swiper'
import SearchBar from './Header'
import AntDesign from "react-native-vector-icons/AntDesign"
import Entypo from "react-native-vector-icons/Entypo"


let url = "http://81.70.7.43:3000/songs"

export default class Home extends Component {
    state = {
        musics: []
    }
    componentDidMount() {
        fetch(url).then(resp => resp.json())
            .then(musics => this.setState({ musics }))
    }
    _play = (index) => {
        this.props.navigation.navigate('正在播', { index: index })
    }
    render() {
        return (
            <View>
                <View>
                    <SearchBar />
                </View>
                <View style={styles.wrapper}>
                    <Swiper autoplay={true}>
                        {this.state.musics.map((m, minx) =>
                            <View key={minx} style={styles.slide}>
                                <Image style={styles.img} source={{ uri: m.img }}></Image>
                            </View>
                        )}
                    </Swiper>
                </View>
                <View style={styles.middle}>
                    <View style={styles.icon}>
                        <Entypo name={"music"} size={40} color={"red"} />
                        <Text>歌手</Text>
                    </View>
                    <View style={styles.icon}>
                        <AntDesign name={"areachart"} size={40} color={"red"} />
                        <Text>排行</Text>
                    </View>
                    <View style={styles.icon}>
                        <Entypo name={"radio"} size={40} color={"red"} />
                        <Text>电台</Text>
                    </View>
                    <View style={styles.icon}>
                        <AntDesign name={"team"} size={40} color={"red"} />
                        <Text>一起</Text>
                    </View>
                </View>
                <View style={styles.list}>
                    <ScrollView>
                        <List>
                            {this.state.musics.map((m, index) =>
                                <List.Item key={index} onPress={() => this._play(index)}>
                                    <View>
                                        <Text>{m.name}</Text>
                                        <Text>{m.singer}</Text>
                                    </View>
                                </List.Item>
                            )}
                        </List>
                    </ScrollView>
                </View>
            </View>

        )
    }
}
const styles = StyleSheet.create({
    wrapper: {
        height: 240, width: 360, margin: 20
    },
    img: {
        height: 240, width: 360
    },
    slide: {
        flex: 1, justifyContent: 'center', alignItems: 'center'
    },
    middle: {
        flexDirection: 'row', justifyContent: 'space-around', marginTop: 10
    },
    icon: {
        alignItems: 'center'
    },
    list: {
        padding: 15, height: 320
    }
})
